<template>
  <div class="svg-list">
    <template v-if="name">
      <img :src="getIconPath(name)" :alt="name" />
    </template>
    <template v-else>
      <img
        v-for="icon in icons"
        :key="icon"
        :src="getIconPath(icon)"
        :alt="icon"
        @click="copyText(icon)"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 动态加载图标列表
import iconsList from "@/assets/json/icons-list.json";
import useClipboard from "vue-clipboard3";
// 定义props
// const name = defineModel<string>();
defineProps({
  name: {
    type: String,
    default: "",
  },
});
const icons = ref(iconsList);

const { toClipboard } = useClipboard();

const copyText = async (name: string) => {
  try {
    // await toClipboard('<SvgIcon name="' + name + '" />');
    await toClipboard(name);
    ElMessage.success("复制成功" + name);
  } catch (e) {
    ElMessage.error("复制失败");
  }
};
// 获取图标路径的方法
const getIconPath = (iconName: string): string => {
  return new URL(`/src/assets/icons/${iconName}.svg`, import.meta.url).href;
};
</script>

<style scoped lang="scss">
.svg-list {
  display: inline-block;
  font-size: 0;
  img {
    width: 24px;
  }
}
</style>
